<template>
  <div class="AddUserPerform">
    <el-dialog right title="用户管理" :visible.sync="dialogVisible" @open="dialogOpen">
      <div class="dialog-body">
        <div class="body-header">
          <span>部门：{{organization.name}}</span>
        </div>
        <div class="body-content">
          <el-form>
            <el-form-item label="登录名：">
              <el-input placeholder="请输入登录名" class="addUser-input" v-model="account" maxlength="15"></el-input>
              <span class="must-mark">*</span>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input placeholder="请输入密码" show-password class="addUser-input" v-model="password" maxlength="15"></el-input>
              <span class="must-mark">*</span>
            </el-form-item>
            <el-form-item label="确认密码：">
              <el-input
                placeholder="请再次密码"
                show-password
                class="addUser-input"
                v-model="confirmPassword"
                maxlength="15"
              ></el-input>
              <span class="must-mark">*</span>
            </el-form-item>
            <el-form-item label="工号：">
              <el-input placeholder="请输入工号" class="addUser-input" v-model="sn" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="姓名：">
              <el-input placeholder="请输入姓名" class="addUser-input" v-model="name" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input placeholder="请输入手机号" class="addUser-input" v-model="mobile" maxlength="11"></el-input>
              <span class="must-mark">*</span>
            </el-form-item>
            <el-form-item label="有效期 至：">
              <el-date-picker
                class="addUser-input"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="validityTime"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="短信服务：">
              <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="isOpenSms"></el-switch>
            </el-form-item>
            <el-form-item label="角色：">
              <div class="el_consist">
                <el-checkbox-group v-model="checkRoles">
                  <el-checkbox
                    v-for="item in rolesList"
                    :key="item.id"
                    :label="item.id"
                    name="type"
                  >{{item.displayName}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <span class="must-mark">*</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postAddUser">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { rolesList, addUser, postOperationLogs } from "@/api/apiManagement";

export default {
  name: "AddUserPerform",
  props: {
    organization: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      dialogVisible: false,
      rolesList: [],
      account: "",
      password: "",
      confirmPassword: "",
      sn: "",
      name: "",
      mobile: "",
      validityTime: "",
      isOpenSms: false,
      checkRoles: [],
      organizationId: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    isShowDia(isVisible) {
      let self = this;
      self.dialogVisible = isVisible;
    },
    dialogOpen() {
      this.reset_data();
      this.organizationId = this.organization.id;
      this.getRolesList();
    },
    getRolesList() {
      rolesList()
        .then(response => {
          if (response) {
            this.rolesList = response.list;
          }
        })
        .catch(() => {});
    },
    postAddUser() {
      if (this.account.length <= 0) {
        this.$message.error("请输入登录名");
        return;
      }
      if (this.password.length <= 0) {
        this.$message.error("请输入密码");
        return;
      }
      if (this.confirmPassword.length <= 0) {
        this.$message.error("请再次输入密码");
        return;
      }
      if (this.password != this.confirmPassword) {
        this.$message.error("两次密码不一致");
        return;
      }
      let a = /^1\d{10}$/;
      if (!this.mobile || !a.test(this.mobile)) {
        this.$message.error("手机号格式不正确");
        return;
      }
      if (this.checkRoles.length <= 0) {
        this.$message.error("请选择角色");
        return;
      }
      let parm = {
        account: this.account,
        isOpenSms: this.isOpenSms === true ? "1" : "0",
        mobile: this.mobile,
        name: this.name,
        organizationId: this.organizationId,
        password: this.password,
        roleIds: this.checkRoles.join(","),
        sn: this.sn,
        validityTime: this.validityTime
      };
      addUser(parm)
        .then(response => {
          this.setOperationLogs("新增-用户-" + this.name);
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$emit("change", "click");
          this.dialogVisible = false;
        })
        .catch(() => {});
    },
    reset_data() {
      this.account = "";
      this.password = "";
      this.confirmPassword = "";
      this.organizationId = "";
      this.sn = "";
      this.name = "";
      this.mobile = "";
      this.validityTime = "";
      this.isOpenSms = false;
      this.checkRoles = [];
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>
<style>
/* .AddUserPerform span,
.AddUserPerform li,
.AddUserPerform input,
.AddUserPerform label {
    color: black
} */

.AddUserPerform .el-dialog {
  background-color: rgb(215, 239, 236);
  width: 50%;
  min-width: 480px;
  padding: 0px 5px 5px;
  overflow: hidden;
}
.AddUserPerform .el-dialog__body {
  border: 1px solid #90e8c6;
  border-bottom: none;
  background-color: white;
  padding: 0px;
}
.AddUserPerform .el-dialog__header {
  padding: 0px 5px;
}
.AddUserPerform .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.AddUserPerform .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.AddUserPerform .dialog-body .body-header {
  padding: 5px 20px;
}
.AddUserPerform .dialog-body .body-header span {
  display: block;
  line-height: 40px;
  border-bottom: solid 1px #bababa;
  font-weight: bolder;
}

.AddUserPerform .right-operation .el-form-item__label {
  line-height: 26px;
  float: left;
}
.AddUserPerform .right-operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.AddUserPerform .body-content {
  padding-left: 30px;
  overflow: hidden;
}
.AddUserPerform .body-content .must-mark {
  color: red;
  font-size: 24px;
  margin-top: 2px;
  line-height: 20px;
  vertical-align: middle;
  display: inline-block;
}
.AddUserPerform .body-content .el-form-item .el-form-item__label {
  width: 110px;
}
.AddUserPerform .body-content .addUser-input {
  width: 210px;
  height: 27px;
}
.AddUserPerform .body-content .addUser-input .el-input__inner {
  height: 26px;
  line-height: 24px;
  border: 1px solid rgb(202, 231, 238);
}
.AddUserPerform .body-content .el-form-item .el_consist {
  width: 45%;
  float: left;
}
.AddUserPerform .el-dialog__footer {
  border: 1px solid #90e8c6;
  background-color: #f1f1f1;
  border-top: 1px solid #d9d9d9;
  padding: 0px 5px 5px;
}
.AddUserPerform .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}
</style>

